<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
  <head>

    <title>query</title>
    <style type="text/css">
      * { margin: 0; padding: 0; }
      body { font: 14px helvetica, arial, clean, sans-serif; margin-top: 30px; text-align: center; }

      /* html, body */
      /* height: 100% */
      .main { position: relative; width: 40em; text-align: left; margin-top: 3em; margin-right: auto; margin-bottom: 2em; margin-left: auto; }
      .main h1 { -webkit-user-select: none; font: 24px "Helvetica"; color: #00cc00; }
      .main h2, .main h3 { color: #000000; font-size: 97%; margin-bottom: 1em; }
      .main a { text-decoration: none; color: blue; }
      .main a:hover { color: #000000; text-decoration: underline; }
      .main ul { padding-left: 40px; }
      .main li { list-style-type: none; }

      textarea { font: 14px monaco, courier new, monospace;
                 text-align: left; height: 300px; width: 500px;}

      ul.projects { padding-left: 0px; }
      ul.projects li { line-height: 1.5em; }

      #post { font: 16px Times New Roman; }
      #post .meta { color: #909090; font: 14px helvetica, arial, clean, sans-serif; margin-bottom: 1em; }
      #post p { line-height: 1.3em; margin-top: 1em; }
      #post code { font: 12px monaco, "courier new", monospace; }

      #posts { position: relative; }

      /* position: absolute */
      /* right: 0 */
      #stack, #stack-margin { float: left; clear: none; }
      #stack-margin { margin-left: 1em; }
      #date { color: gray; position: absolute; left: -40px; font-size: 90%; text-align: left; padding-top: 1px; }

      #spacer30 { margin-top: 30px; clear: both; }
      #spacer20 { margin-top: 20px; clear: both; }
      #spacer15 { margin-top: 15px; clear: both; }

      #the_output { font: 14px monaco, courier new, monospace; }

    </style>

    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../json2.js"></script>
  </head>
  <body>
    <div class="main">

    <h1>query the GeoAPI</h1>

    <div id="spacer20"></div>

    <textarea id="the_input">{
  "lat": 37.75629
  "lon": -122.4213
  "radius": "0.2km"
  "entity": [{
    "guid": null
    "type": "business"
    "view.listing": {
      "a:verticals": "restaurants"
      "b:verticals": "food-and-drink:coffee-houses"
      "address": []
      "name": null
    }
  }]
}</textarea><p/>

    <div id="spacer15"></div>

    <h2><a id="doit" href="javascript:undefined">result &raquo;</a></h2>
    <pre id="the_output">
    </div>

    </div>
  </body>
  <script>
    $("a#doit").click(function() {
      var root = 'http://api.geoapi.com/v1'

      var url = root + '/q?apikey=demo&q=' + escape($("#the_input").val())
      $.getJSON(url + '&jsoncallback=?', function(data) {
        $("#the_output").text(JSON.stringify(data, null, 2))
      })
    })
  </script>
</html>
